<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="img/favicon.ico">
	<style>
body, ul, p, img{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: YouYuan;  
    font-size: 14px;
}
.header{
	width: 900px;
    height: 81px;
    margin: 0 auto;
    text-align: left;
    position: relative;
}
.header .backg {
    width: 644px;
    height: 27px;
    position: absolute;
    left: 0;
    top: 30px;
    background-image: url(img/glb_v2.png);
}
.header .links{
	width: 200px;
    position: absolute;
    right: 0;
    top: 34px;
    text-align: right;
    color: #999;
}
.header .links a{
	font-size: 12px;
	margin: 0 5px;
	color: #039;
	text-decoration: none;
}
.header .links a:hover{
	text-decoration:underline;
}
#registrationPage{
	width: 900px;
	height: 750px;
	background-color: white;      
	margin: auto;        
	border: 1px solid gray;   
	border-radius: 10px;   
	position: relative;  
}
#registrationPage input{
	width: 400px;    
	height: 28px;     
	margin: 8px;
}
#regTabs{
    width: 412px;
    height: 35px;
    background-color: #f6f6f6;   
    border-radius: 5px;
    margin-left:100px;
    margin-top: 45px;
}
#regTabs li{
	list-style: none;     
	float: left;			
	border-right: 1px solid gray;    
	width: 135px;
	height: 35px;
	text-align: center;        
	line-height: 35px;
	font-size: 14px;
	cursor: pointer;        
}
.Box{
	width: 550px;
	height: 600px;
	padding-left: 30px;     
	padding-top: 20px;  
	/*display: none;*/   
}
.Box2{
width: 550px;
	height: 600px;
	padding-left: 30px;     
	padding-top: 20px;
}
.Box p{
	color:gray;
	font-size:12px;
	margin-left:70px;
}
span{
	color: red;   
}
#toggleBtn{
	font-size:12px;
	cursor:pointer;
	margin-left:20px;
	color:#0072e3;
}
#toggleBtn:hover{
	text-decoration:underline;
}
.Libg{
	background-color: #2d75bf;   
	color: white;
	border-radius: 5px;
	font-weight: bold;
}
.Bgimg{
	position: absolute;
	top: 200px;          
	right: 50px;
}
#Code{
	position: absolute;
	top: 383px;
	right: 400px;
	cursor: pointer;
}
#Bg{
	background-color: #f5f5f5;
	height: 705px;         
	width: 350px;
	position: absolute;    
	right: 0;
	top: 45px;
}
/*em{
	position: absolute;
	left: 110px;
	top: 46%;
	background: url(img/flags.gif);
	background-position: 0 -825px;
	display: inline-block;
	width: 16px;
	height: 11px;
	margin-top: -5px;
	cursor: pointer;
}*/
.flag{

    background-image: url("img/triangle.gif");
    background-repeat: no-repeat;
    background-position: 25px center;

    width: 100%;
    height: 100%;

    float: left;
}

.flag em{

    background-image: url("img/flags.gif");
    background-repeat: no-repeat;
	background-position: 0 -825px;
    position: absolute;
   left: 110px;
	top: 46%;
    margin-top: -5px;
    display: inline-block;

    width: 16px;
    height: 11px;

    overflow: hidden;

}
	</style>
</head>
<body>
<header class="header">
<div class="backg"></div>
<div class="links"><a href="#">了解更多</a>|<a href="#">反馈意见</a></div>

</header>
	<div id="registrationPage">
	<p style="color:white;background-color:#5e8ebf;border-top-left-radius:10px;border-top-right-radius:10px;line-height:45px;font-size:15px;">欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</p>
	<ul id="regTabs">
	<li class="Libg">注册字母邮箱</li>
	<li>注册手机邮箱</li>
	<li style="border:none;">注册VIP邮箱</li>
	</ul>
	<!--注册字母邮箱-->
	<div id="Box" class="Box">
	<span>*</span>邮箱地址<input type="text" style="width:250px;">@
	<select style="width:100px;height:30px;font-size:17px;font-weight:bold;">
	<option value="">163.com</option>
	<option value="">126.com</option>
	<option value="">yeah.net</option>
	</select>
	<p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
	<span>*</span>密码<input type="password" style="margin-left:40px;">
	<p>6~16个字符，区分大小写</p>
	<span>*</span>确认密码<input type="password">
	<br>
	<span>*</span>手机号码<input type="text" style="padding-left:35px; font-size:16px;font-weight:bold;width:365px;" value="+86-">
	<div class="itl" style="width:35px;height:27px;line-height:27px;">
                                <div class="flag flag-CN">
                                    <em>&nbsp;</em>
                                </div>      
                            </div>
	<p>忘记密码时，可以通过该手机号码快速找回密码</p>
	<span>*</span>验证码<input type="text" style="width:250px;margin-left:20px;">
	<p>请填写图片中的字符，不区分大小写</p>
	<input type="button" value="免费获取验证码" style="width:250px;height:30px;font-size:15px;font-weight: bold;cursor:pointer;margin-left:75px;">
	<a id="toggleBtn" onclick="CodeImages()">看不清楚？换张图片</a>
	<br>
	<span>*</span>短信验证码<input type="text" style="width:380px;"><img src="img/Code/Code0.jpg" alt="" id="Code" onclick="CodeImages()">
	<p>请查收手机短信，并填写短信中的验证码</p>
	<br>
	<p><input type="checkbox" style="width:13px;height:13px;"> 同意 <strong>"服务条款"</strong>和<strong>"隐私权相关政策"</strong></p>
	<input type="button" value="立即注册" style="width:130px;height:45px;border-radius:10px;background-color:#00bb00;color:white;margin-left:75px;cursor:pointer;">
	</div>
	<div id="Bg">

	</div>
	<img src="img/phone.gif" alt="" class="Bgimg">
	<!--注册手机邮箱-->
	<!-- <div id="Box" class="Box2">
	<span>*</span>手机号码<input type="text" style="width:250px;">@163.com
	<p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p>
	<span>*</span>验证码<input type="text" style="width:250px;margin-left:20px;">
	<p>请填写图片中的字符，不区分大小写</p>
	<input type="button" value="免费获取验证码" style="width:250px;height:30px;font-size:15px;font-weight: bold;cursor:pointer;margin-left:75px;">
	<a id="toggleBtn" onclick="CodeImages()">看不清楚？换张图片</a>
	<br>
	<span>*</span>短信验证码<input type="text" style="width:380px;"><img src="img/Code/Code0.jpg" alt="" id="Code" onclick="CodeImages()">
	<p>请查收手机短信，并填写短信中的验证码</p>
	<span>*</span>密码<input type="password" style="margin-left:40px;">
	<p>6~16个字符，区分大小写</p>
	<span>*</span>确认密码<input type="password">
	<br>
	<p><input type="checkbox" style="width:13px;height:13px;"> 同意 <strong>"用户须知"</strong>和<strong>"隐私权相关政策"</strong></p>
	<input type="button" value="立即注册" style="width:130px;height:45px;border-radius:10px;background-color:#00bb00;color:white;margin-left:75px;cursor:pointer;">
	</div> -->
	</div>
	<script>
	var oBox=document.getElementById('Box');
	var oregTabs=document.getElementById('regTabs');
	var TxtBtns=oregTabs.getElementsByTagName('li');	
	var oCode=document.getElementById('Code');
	var num=Math.floor(Math.random()*5);
	oCode.src='img/Code/Code'+num+'.jpg'
	for (var i = 0; i < TxtBtns.length; i++) {
		TxtBtns[i].onclick=function(){
			for (var i = 0; i < TxtBtns.length; i++) {
		TxtBtns[i].className='';
	}
			this.className='Libg'
		}
	}
	function CodeImages(){
	var num=Math.floor(Math.random()*5);
	oCode.src='img/Code/Code'+num+'.jpg'
	}
	</script>
</body>
</html>